4. position的属性值有哪些？

webp   文件小，支持有损和无损压缩，支持动画、透明   浏览器兼容性不好   支持webp格式的app和webview  

id 选择器：100

7. 浮动相关

元素设置为浮动之后，display会自动变成block。

（3）PNG

7. 浮动相关

元素设置为浮动之后，display会自动变成block。

box-sizeing:border-box表示IE盒模型（也就是怪异盒模型）

后代选择器   li a  

在CSS3中，可以使用box-sizeing:border-box将普通盒模型转化为IE盒模型。有时候我们已经设置了一个盒子的宽高，但是，如果想要改变border，这样盒子的大小就会发生改变，我们就可以将其转化为IE盒模型，就不用每次计算盒子内容大小了。

与浮动元素同级的非浮动元素给跟随在它后面

在盒子模型中

减少了图片命名的困扰，只要给一张或几张图片命名即可

后代选择器   li a  

与浮动元素同级的非浮动元素给跟随在它后面

gif   文件小，支持动画、透明，无兼容性问题   只支持256种颜色   色彩简单的logo、icon、动图  

适用于：色彩丰富的图片、渐变图像

!important声明的样式的优先级最高

4. position的属性值有哪些？

缺点：

relative   生成相对定位的元素，相对于其原来的位置进行定位  

png-8是采用无损压缩，基于8位索引色的位图格式，比gif的透明的支持更好，同等质量下大小也更小，但是不支持动画。适用于图标，背景，按钮。

（2）JPG

absolute   生成绝对定位的元素，相对于static定位以外的一个父元素进行定位  

最后一个浮动元素之后添加一个空的p标签，并添加clear:both样式

id 选择器：100

h1 + p {margin-top:50px;}

对于选择器的优先级：

（3）修改常规文档流中的元素的display通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘

包含浮动元素的父级标签添加overflow:hidden或者overflow:auto

不支持透明

visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见

static   默认值，没有定位，元素出现在正常的文档流中  
属性选择器   a[ref=“eee”]  

box-sizeing:border-box表示IE盒模型（也就是怪异盒模型）

box-sizeing:content-box表示标准盒模型（默认值）

元素标签：1000

更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。

适用于：色彩简单的logo，icon，线框图，简单的动画

区别：

元素标签：1000

格式优点缺点适用场景

visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示。

2. display:none与visibility:hidden的区别

区别：

（2）继承

减少了图片命名的困扰，只要给一张或几张图片命名即可

5. PNG、GIF、JPG、WEBP的区别以及如何选择？

标签选择器   p  
1. CSS3中的盒模型

CSS3中的盒模型有以下两种：标准盒模型、IE盒模型

（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。visibility:hidden

合并比较麻烦，需要将多张图片有序的合理的合并为一张图片，还要预留一定的空间，防止出现不必要的背景

GIF图片只存储8位索引，最多支持256色，

采用直接色，色彩丰富

支持透明和动画

适用于：支持webp的APP或网页

1. CSS3中的盒模型

CSS3中的盒模型有以下两种：标准盒模型、IE盒模型

（4）WEBP

display:none是非继承属性，他的子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示。

display:none会让元素完全中渲染树中消失，渲染的时候不会占据任何空间；

jpg   色彩丰富，文件小   有损压缩，反复保存图片质量下降明显   色彩丰富的图片/渐变图像  

3. 说一说CSS的sprite（精灵图）

若一个元素浮动，则其前面的元素也需要浮动，否则会影响页面的结构

（1）什么时候需要清除浮动？

浮动造成的问题如下：

除此之外，还有：Flex弹性伸缩盒模型

（3）PNG

id选择器   #myid  
目录

1. CSS3中的盒模型

（1）什么时候需要清除浮动？

更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。

visibility:hidden是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示。

（2）JPG

gif   文件小，支持动画、透明，无兼容性问题   只支持256种颜色   色彩简单的logo、icon、动图  

不可以继承的样式：border、padding、margin、width、height

子选择器   ul>li  
relative   生成相对定位的元素，相对于其原来的位置进行定位  

标准盒模型和IE盒模型的区别就是：标准盒模型的宽高指的是内容的宽高，而IE盒模型的宽高指的是内容，内边距，边框的总和。

png   无损压缩，支持透明，简单图片尺寸小   不支持动画，色彩丰富的图片尺寸大   logo/icon/透明图  

支持透明和动画

格式优点缺点适用场景

精灵图就是将多个小图片拼接在一个图片中，使用的时候通过background-position元素尺寸调节需要显示的背景图案。

继承得到的样式的优先级最低

box-sizeing:content-box表示标准盒模型（默认值）

减少HTTP请求数，在一定程度上提高了页面的加载速度

类选择器   #myclassname  

（1）什么时候需要清除浮动？

（4）WEBP

2. display:none与visibility:hidden的区别

这两个属性都是让元素隐藏不可见

（2）继承

4. position的属性值有哪些？属性值概述

（3）修改常规文档流中的元素的display通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘

采用直接色，色彩丰富

元素选择器：1

不支持透明

精灵图就是将多个小图片拼接在一个图片中，使用的时候通过background-position元素尺寸调节需要显示的背景图案。

在宽屏或者高分辨率屏幕下的自适应页面，如果图片不够宽，就可能出现背景断裂的情况

2. display:none与visibility:hidden的区别

这两个属性都是让元素隐藏不可见

属性选择器   a[ref=“eee”]  

维护比较麻烦，如果页面背景有一点改变，就需要修改整个合并的图片

支持有损压缩和无损压缩

fixed   生成绝对定位的元素，相对于浏览器窗口进行定位  

专题推荐：2020年CSS面试题汇总（最新）

webp   文件小，支持有损和无损压缩，支持动画、透明   浏览器兼容性不好   支持webp格式的app和webview  
标签选择器   p  

采用无损压缩，尺寸较小

png-8是采用无损压缩，基于8位索引色的位图格式，比gif的透明的支持更好，同等质量下大小也更小，但是不支持动画。适用于图标，背景，按钮。

png   无损压缩，支持透明，简单图片尺寸小   不支持动画，色彩丰富的图片尺寸大   logo/icon/透明图  

!important声明的样式的优先级最高

若一个元素浮动，则其前面的元素也需要浮动，否则会影响页面的结构

6. CSS选择器有哪些？优先级？选择器格式

给父级p定义height属性

通配符选择器   *  
inherit   规定从父元素继承position属性的值  

5. PNG、GIF、JPG、WEBP的区别以及如何选择？

减少HTTP请求数，在一定程度上提高了页面的加载速度

采用有损压缩，可以控制压缩的质量

display:none是非继承属性，他的子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示。

在CSS3中，可以使用box-sizeing:border-box将普通盒模型转化为IE盒模型。有时候我们已经设置了一个盒子的宽高，但是，如果想要改变border，这样盒子的大小就会发生改变，我们就可以将其转化为IE盒模型，就不用每次计算盒子内容大小了。

4. position的属性值有哪些？属性值概述

2. display:none与visibility:hidden的区别

优点：

包含浮动元素的父级标签添加overflow:hidden或者overflow:auto

适用于：色彩丰富的图片、渐变图像

如果优先级相同，则最后出现的样式生效

7. 浮动相关

标准盒模型和IE盒模型的区别就是：标准盒模型的宽高指的是内容的宽高，而IE盒模型的宽高指的是内容，内边距，边框的总和。

在盒子模型中

相邻兄弟选择器   h1+p  
6. CSS选择器有哪些？优先级？选择器格式
absolute   生成绝对定位的元素，相对于static定位以外的一个父元素进行定位  

元素选择器：1

5. PNG、GIF、JPG、WEBP的区别以及如何选择？

（1）GIF

GIF图片只存储8位索引，最多支持256色，

可以继承的属性：font-size、font-family、color

6. CSS选择器有哪些？优先级？

display:none会让元素完全中渲染树中消失，渲染的时候不会占据任何空间；

（2）如何清除浮动？

清除浮动的方式如下：

visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见

5. PNG、GIF、JPG、WEBP的区别以及如何选择？

（1）GIF

减少图片的体积，因为每个图片都有一个头信息，把多个图片放在一起，会共用一个头信息，较少了图片的字节数

最后一个浮动元素之后添加一个空的p标签，并添加clear:both样式

（2）如何清除浮动？

清除浮动的方式如下：

伪类选择器   li:last-child  

继承得到的样式的优先级最低

3. 说一说CSS的sprite（精灵图）

类选择器   #myclassname  

class选择器：10

优点：

png-24采用无损压缩，是基于直接色的位图格式，大小相对以上几种更大，但是图片质量高，适用于源文件或者需要二次编辑的图片格式的保存。

由Google开发，体积更小

jpg   色彩丰富，文件小   有损压缩，反复保存图片质量下降明显   色彩丰富的图片/渐变图像  

相邻兄弟选择器   h1+p  

png-24采用无损压缩，是基于直接色的位图格式，大小相对以上几种更大，但是图片质量高，适用于源文件或者需要二次编辑的图片格式的保存。

合并比较麻烦，需要将多张图片有序的合理的合并为一张图片，还要预留一定的空间，防止出现不必要的背景

支持有损压缩和无损压缩

属性继承性：

可以继承的属性：font-size、font-family、color

在宽屏或者高分辨率屏幕下的自适应页面，如果图片不够宽，就可能出现背景断裂的情况

支持透明和简单动画

除此之外，还有：Flex弹性伸缩盒模型

h1 + p {margin-top:50px;}

对于选择器的优先级：

父元素的高度无法撑开，影响与父级同级的元素

（1）在渲染树中

3. 说一说CSS的sprite（精灵图）

概念：

（4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。visibility:hidden

减少图片的体积，因为每个图片都有一个头信息，把多个图片放在一起，会共用一个头信息，较少了图片的字节数

3. 说一说CSS的sprite（精灵图）

概念：

适用于：支持webp的APP或网页

inherit   规定从父元素继承position属性的值  

适用于：色彩简单的logo，icon，线框图，简单的动画

维护比较麻烦，如果页面背景有一点改变，就需要修改整个合并的图片

6. CSS选择器有哪些？优先级？

（2）如何清除浮动？

采用有损压缩，可以控制压缩的质量

fixed   生成绝对定位的元素，相对于浏览器窗口进行定位  

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器.例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

由Google开发，体积更小

目录

1. CSS3中的盒模型

class选择器：10

支持透明和简单动画

通配符选择器   *  

（2）如何清除浮动？

static   默认值，没有定位，元素出现在正常的文档流中  

缺点：

如果优先级相同，则最后出现的样式生效

不可以继承的样式：border、padding、margin、width、height

子选择器   ul>li  
id选择器   #myid  
（1）什么时候需要清除浮动？

浮动造成的问题如下：

伪类选择器   li:last-child  

给父级p定义height属性

（1）在渲染树中

采用无损压缩，尺寸较小

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器.例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

7. 浮动相关

属性继承性：

父元素的高度无法撑开，影响与父级同级的元素

需要注意的是：

需要注意的是：